<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { getBookDetail } from '@/api/book'

const route = useRoute()
const book = ref(null)
const loading = ref(true)

onMounted(async () => {
  try {
    const response = await getBookDetail(route.params.id)
    book.value = response.data
  } catch (error) {
    console.error('获取图书详情失败:', error)
  } finally {
    loading.value = false
  }
})
</script>

<template>
  <div class="book-detail">
    <el-card v-if="loading" class="loading-card">
      <el-skeleton :rows="6" animated />
    </el-card>

    <el-card v-else-if="book" class="detail-card">
      <template #header>
        <div class="detail-header">
          <h2>{{ book.title }}</h2>
        </div>
      </template>

      <div class="detail-content">
        <div class="detail-image">
          <el-image 
            :src="book.image_url" 
            :preview-src-list="[book.image_url]" 
            fit="cover" 
            style="width: 200px; height: 300px;"
          />
        </div>

        <div class="detail-info">
          <el-descriptions :column="1" border>
            <el-descriptions-item label="作者">{{ book.author || '未知' }}</el-descriptions-item>
            <el-descriptions-item label="出版社">{{ book.publisher || '未知' }}</el-descriptions-item>
            <el-descriptions-item label="出版日期">{{ book.publish_date || '未知' }}</el-descriptions-item>
            <el-descriptions-item label="价格">{{ book.price ? `¥${book.price}` : '未知' }}</el-descriptions-item>
            <el-descriptions-item label="评分">
              <el-rate 
                v-model="book.rating" 
                disabled 
                show-score 
                :max="10" 
                :score-template="book.rating ? book.rating.toFixed(1) : '0.0'" 
              />
            </el-descriptions-item>
            <el-descriptions-item label="评论数量">{{ book.review_count || 0 }}</el-descriptions-item>
            <el-descriptions-item label="分类">
              <el-tag v-if="book.categories.level1" type="info">{{ book.categories.level1 }}</el-tag>
              <el-tag v-if="book.categories.level2" type="info">{{ book.categories.level2 }}</el-tag>
              <el-tag v-if="book.categories.level3" type="info">{{ book.categories.level3 }}</el-tag>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
    </el-card>

    <el-card v-else class="empty-card">
      <el-empty description="未找到图书信息" />
    </el-card>
  </div>
</template>

<style scoped>
.book-detail {
  padding: 20px;
}

.loading-card,
.detail-card,
.empty-card {
  margin-bottom: 20px;
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.detail-content {
  display: flex;
  gap: 30px;
}

.detail-image {
  flex-shrink: 0;
}

.detail-info {
  flex-grow: 1;
}

@media (max-width: 768px) {
  .detail-content {
    flex-direction: column;
  }
  
  .detail-image {
    margin-bottom: 20px;
    align-self: center;
  }
}
</style>